<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>JQuery CSS</title>
		<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#div1').css('color', 'red'); // css(name, value)设置某个行内元素的CSS样式
				$('#div1').css({
					'color': 'red',
					'width': '40px',
					'height': '40px'
				});// 设置某个元素行内多个CSS样式, 
				// 等价于 $('#div1').css('color', 'red').css('width', '40px').css('height', '40px');

				$('#div1').css('color'); // css(name)获取某个元素行内的CSS 样式
				var css = $('#div1').css(['color', 'width', 'height']); // css([name1, name2, name3...])获取某个元素行内多个CSS 样式
				// 原生JavaScript遍历对象数组: for(var i in css) {alert(i + '=' +css[i]);}
				// $.each()方法遍历对象数组, 第一个参数css为对象数组, function中的参数attr为属性名, value为属性值
				$.each(css, function(attr, value){
					// alert(attr + '=' + value);
				});
				
				$('div').each(function(index, element){
					// alert(index + ':' + $(element).attr('id'));
				});
				
				// 可以使用function来设置某个元素行内的CSS样式
				$('div').css('width', function(index, value){
					if(index == 1) {
						$(this).text('Hello World');
						return '100px';
					}
				});
				alert($('#div2').css('width'));
			});	
		</script>
		</head>
	<body>
		<div id="div1">
			<strong>Hello</strong>
		</div>
		
		<div id="div2"></div>
		 
		<div id="div3"></div>
		
		<form action="">
			<input id="input1" type="text" value="Clouds over the head" />
			<input id="input2" type="text" value="" /><br/>
			
			<input id="radio1" type="radio" name="gender" value="男"/>男&nbsp;&nbsp;
			<input id="radio2" type="radio" name="gender" value="女"/>女<br/>
			<input id="ck1" type="checkbox" name="level1" value="level1"/> Level 1&nbsp;&nbsp;
			<input id="ck2" type="checkbox" name="level2" value="level2"/> Level 2&nbsp;&nbsp;
			<input id="ck3" type="checkbox" name="level3" value="level3"/> Level 3&nbsp;&nbsp;
		</form>
	</body>
</html>